<template>
  <div>
    <div style="margin-bottom: 16px;">
      <a-button type="primary" @click="showIndicatorModal">
        <a-icon type="plus" /> 添加指标
      </a-button>
      <a-divider type="vertical" />
      <a-button @click="importIndicators">
        <a-icon type="upload" /> 导入指标
      </a-button>
      <a-divider type="vertical" />
      <a-button @click="exportIndicators">
        <a-icon type="download" /> 导出指标
      </a-button>
      <a-divider type="vertical" />
      <a-input-search
        placeholder="请输入指标名称搜索"
        style="width: 200px; float: right;"
        @search="onSearch"
      />
    </div>

    <a-table
      :columns="columns"
      :dataSource="data"
      rowKey="id"
      :pagination="pagination"
      @change="handleTableChange"
    >
      <template slot="category" slot-scope="text">
        <a-tag color="blue">{{text}}</a-tag>
      </template>
      <template slot="status" slot-scope="text">
        <a-badge :status="text === '启用' ? 'success' : 'default'" :text="text" />
      </template>
      <template slot="action" slot-scope="text, record">
        <a-button type="link" size="small" @click="editIndicator(record)">编辑</a-button>
        <a-divider type="vertical" />
        <a-button type="link" size="small" @click="toggleStatus(record)">
          {{record.status === '启用' ? '停用' : '启用'}}
        </a-button>
        <a-divider type="vertical" />
        <a-button type="link" size="small" @click="deleteIndicator(record)">删除</a-button>
      </template>
    </a-table>

    <a-modal
      :title="indicatorModalTitle"
      :visible="indicatorModalVisible"
      @ok="handleIndicatorOk"
      @cancel="handleIndicatorCancel"
      :width="700"
    >
      <a-form :form="indicatorForm" layout="vertical">
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="指标编号">
              <a-input
                v-decorator="['code', { rules: [{ required: true, message: '请输入指标编号' }] }]"
                placeholder="如：T001"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="指标分类">
              <a-select
                v-decorator="['category', { rules: [{ required: true, message: '请选择指标分类' }] }]"
                placeholder="请选择指标分类"
              >
                <a-select-option value="教学态度">教学态度</a-select-option>
                <a-select-option value="教学内容">教学内容</a-select-option>
                <a-select-option value="教学方法">教学方法</a-select-option>
                <a-select-option value="教学效果">教学效果</a-select-option>
                <a-select-option value="其他">其他</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-form-item label="指标名称">
          <a-input
            v-decorator="['name', { rules: [{ required: true, message: '请输入指标名称' }] }]"
            placeholder="请输入指标名称"
          />
        </a-form-item>

        <a-form-item label="指标说明">
          <a-textarea
            v-decorator="['description']"
            :rows="3"
            placeholder="请输入指标说明"
          />
        </a-form-item>

        <a-form-item label="权重(%)">
          <a-input-number
            v-decorator="['weight', { initialValue: 0, rules: [{ required: true, message: '请输入权重' }] }]"
            :min="0"
            :max="100"
            :step="1"
            style="width: 100%"
          />
        </a-form-item>

        <a-form-item label="状态">
          <a-switch
            v-decorator="['status', { valuePropName: 'checked', initialValue: true }]"
            checked-children="启用"
            un-checked-children="停用"
          />
        </a-form-item>
      </a-form>
    </a-modal>

    <a-modal
      title="导入指标"
      :visible="importModalVisible"
      @ok="handleImportOk"
      @cancel="handleImportCancel"
    >
      <a-upload-dragger
        name="file"
        :multiple="false"
        :action="uploadUrl"
        @change="handleImportChange"
      >
        <p class="ant-upload-drag-icon">
          <a-icon type="inbox" />
        </p>
        <p class="ant-upload-text">点击或拖拽文件到此处上传</p>
        <p class="ant-upload-hint">支持Excel文件导入，请按照模板格式填写</p>
      </a-upload-dragger>
      <div style="margin-top: 16px;">
        <a-button type="link" @click="downloadTemplate">下载导入模板</a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: '指标编号',
          dataIndex: 'code',
          key: 'code',
          width: 100
        },
        {
          title: '指标名称',
          dataIndex: 'name',
          key: 'name'
        },
        {
          title: '指标分类',
          dataIndex: 'category',
          key: 'category',
          scopedSlots: { customRender: 'category' },
          width: 120
        },
        {
          title: '权重(%)',
          dataIndex: 'weight',
          key: 'weight',
          width: 100
        },
        {
          title: '状态',
          dataIndex: 'status',
          key: 'status',
          scopedSlots: { customRender: 'status' },
          width: 100
        },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'action' },
          width: 200
        }
      ],
      data: [
        {
          id: '1',
          code: 'T001',
          name: '教学态度认真负责',
          category: '教学态度',
          description: '教师备课充分，授课认真，对学生负责',
          weight: 20,
          status: '启用'
        },
        {
          id: '2',
          code: 'T002',
          name: '教学内容充实',
          category: '教学内容',
          description: '教学内容丰富，信息量大，符合教学大纲要求',
          weight: 25,
          status: '启用'
        },
        {
          id: '3',
          code: 'T003',
          name: '教学方法得当',
          category: '教学方法',
          description: '教学方法灵活多样，能激发学生学习兴趣',
          weight: 25,
          status: '启用'
        },
        {
          id: '4',
          code: 'T004',
          name: '教学效果良好',
          category: '教学效果',
          description: '学生能够掌握课程主要内容，达到教学目标',
          weight: 30,
          status: '启用'
        }
      ],
      pagination: {
        current: 1,
        pageSize: 10,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50', '100'],
        showTotal: total => `共 ${total} 条`
      },
      indicatorModalVisible: false,
      importModalVisible: false,
      indicatorModalTitle: '添加指标',
      currentIndicator: null,
      uploadUrl: 'https://www.mocky.io/v2/5cc8019d300000980a055e76' // 模拟上传地址
    }
  },
  beforeCreate() {
    this.indicatorForm = this.$form.createForm(this, { name: 'indicator_form' })
  },
  methods: {
    showIndicatorModal() {
      this.currentIndicator = null
      this.indicatorModalTitle = '添加指标'
      this.indicatorModalVisible = true
      this.$nextTick(() => {
        this.indicatorForm.resetFields()
      })
    },
    editIndicator(record) {
      this.currentIndicator = record
      this.indicatorModalTitle = '编辑指标'
      this.indicatorModalVisible = true
      this.$nextTick(() => {
        this.indicatorForm.setFieldsValue({
          code: record.code,
          name: record.name,
          category: record.category,
          description: record.description,
          weight: record.weight,
          status: record.status === '启用'
        })
      })
    },
    toggleStatus(record) {
      record.status = record.status === '启用' ? '停用' : '启用'
      this.$message.success(`已${record.status}指标`)
    },
    deleteIndicator(record) {
      this.$confirm({
        title: '确认删除',
        content: `确定要删除指标"${record.name}"吗？`,
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk: () => {
          this.data = this.data.filter(item => item.id !== record.id)
          this.$message.success('删除成功')
        }
      })
    },
    handleIndicatorOk() {
      this.indicatorForm.validateFields((err, values) => {
        if (!err) {
          const indicator = {
            code: values.code,
            name: values.name,
            category: values.category,
            description: values.description,
            weight: values.weight,
            status: values.status ? '启用' : '停用'
          }
          
          if (this.currentIndicator) {
            // 更新
            Object.assign(this.currentIndicator, indicator)
            this.$message.success('更新成功')
          } else {
            // 新增
            const newIndicator = {
              id: `indicator_${Date.now()}`,
              ...indicator
            }
            this.data.push(newIndicator)
            this.$message.success('添加成功')
          }
          this.indicatorModalVisible = false
        }
      })
    },
    handleIndicatorCancel() {
      this.indicatorModalVisible = false
    },
    importIndicators() {
      this.importModalVisible = true
    },
    exportIndicators() {
      this.$message.info('导出功能将在实际应用中实现')
    },
    downloadTemplate() {
      this.$message.info('模板下载功能将在实际应用中实现')
    },
    handleImportChange(info) {
      if (info.file.status === 'done') {
        this.$message.success(`${info.file.name} 文件上传成功`)
        this.importModalVisible = false
        // 这里应该处理导入的数据
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} 文件上传失败`)
      }
    },
    handleImportOk() {
      this.importModalVisible = false
    },
    handleImportCancel() {
      this.importModalVisible = false
    },
    onSearch(value) {
      console.log('搜索:', value)
      // 这里应该实现搜索功能
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination = pagination
      // 这里应该处理分页、筛选和排序
    }
  }
}
</script>